import React, { useEffect, useState } from 'react'

import { Input, Button, Table, message, Skeleton } from 'antd';

import styles from './index.module.css'


//网络请求
import { getCase } from '../../../utils/axiosRequest/api'
//列
import { columns } from '../../../constant/caseColumn'



function QueryCase() {
    //消息提示
    const [messageApi, contextHolder] = message.useMessage();
    //表格数据
    const [dataSource, setDataSource] = useState([]);
    //输入框
    const [inuStr, setInuStr] = useState('');
    //加载状态
    const [isLoad, setLoad] = useState(false);

    //[]空数组相当于componentDidMount
    useEffect(() => {
        //返回的函数相当于unmountComponentAtNode
        return () => {

        }
    }, []);


    function clickSearch() {
        if (inuStr == null || inuStr.length == 0) {
            messageApi.open({ type: 'error', content: '请输入任务号' });
            return
        }

        if (inuStr.length != 12) {
            messageApi.open({ type: 'error', content: '请输入正确的任务号' });
            return
        }
        setLoad(true)
        const params = new Map()
        params.set('eventCode', inuStr)
        getCase(params)
            .then(response => {
                const data = response.data
                if (data.code === 1000) {
                    handleData(data.data)
                } else {
                    //处理失败
                    messageApi.open({ type: 'error', content: data.des });
                }
                setLoad(false)
            })
            .catch(error => {
                setLoad(false)
                messageApi.open({ type: 'error', content: error.message });
            });
    }

    function handleData(caseList) {
        if (caseList == null || caseList.length == 0) {
            messageApi.open({ type: 'error', content: '查不到此案件' });
        }
        const data = [];
        const length = caseList.length;
        for (let i = 0; i < length; i++) {
            data.push({
                key: i,
                serial: 1,
                eventCode: caseList[i].eventcode,
                eventDesc: caseList[i].eventDesc,
                eventTime: caseList[i].eventTime.replace("T", " "),
                currentStepName: caseList[i].currentStepName,
                currentDeptName: caseList[i].currentDeptName,
                currentDealPeopleName: caseList[i].currentDealPeopleName,
                lastUpdateTime: caseList[i].lastUpdateTime,
                fileUrls: caseList[i].fileUrls,
            })
        }
        setDataSource(data)
    }

    function onChangeInu(e) {
        setInuStr(e.target.value)
    }

    return (
        <div >
            {contextHolder}
            <div className={styles.content}>
                <div className={styles.search}>
                    <Input type='number' placeholder="请输入任务号..." value={inuStr} onChange={onChangeInu} />
                    <Button onClick={clickSearch} className={styles.search_btn} type="primary">搜索</Button>
                </div>
            </div>
            <Skeleton loading={isLoad}>
                <Table className={styles.tab} title={() => {
                    return (
                        <div>案件信息</div>
                    )
                }} size={'large'}
                    pagination={{ showSizeChanger: false, pageSize: '12', position: ['bottomCenter'], defaultCurrent: '1', total: dataSource.length }}
                    bordered={true} dataSource={dataSource} columns={columns} scroll={{ y: 540, x: 1500 }} />;

            </Skeleton >
        </div>
    )
}

export default QueryCase;
